<template>
  <div>
    <el-dialog title="充值" width="35%" direction="rtl" :wrapper-closable="false" :visible="visible" :before-close="handlerClose" :close-on-click-modal="false">
      <div class="title"><div class="school-name">{{ school.title }}：</div><div class="balance">余额<em>￥{{ school.balance }}</em></div></div>
      <el-form ref="elForm" :model="elForm" :rules="rules" size="small" label-width="92px">
        <el-form-item label="金额" prop="price">
          <el-input v-model="elForm.price" placeholder="请输入充值金额" clearable /><span class="yuan">元</span>
          <div style="color: #909399;font-size: 13px;">充值金额将自动划入到机构账户</div>
        </el-form-item>
        <el-form-item label="实付金额" prop="realPrice">
          <el-input v-model="elForm.realPrice" placeholder="请输入实付金额" clearable /><span class="yuan">元</span>
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input v-model="elForm.notes" type="textarea" :rows="5" placeholder="备注内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="choose-footer">
        <el-button size="small" @click="$emit('update:visible', false)">取消</el-button>
        <el-button type="primary" size="small" @click="setSelect">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    school: {
      type: Object,
      required: true
    },
    value: {
      type: String,
      default: ''
    }
  },
  inject: ['reload'],
  data() {
    return {
      confirmLoading: false,
      school_name: undefined,
      balance: 0,
      elForm: {
        price: undefined,
        realPrice: undefined,
        notes: undefined
      },
      rules: {
        price: [
          {
            required: true,
            message: '请输入充值金额',
            trigger: 'blur'
          }
        ],
        realPrice: [
          {
            required: true,
            message: '请输入实付金额',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    handlerClose() {
      this.$emit('update:visible', false);
      this.$refs['elForm'].resetFields();
    },
    // 提交数据
    setSelect: function () {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          this.xUri = '/school/admin/' + this.school.sid + '/recharge';
          this.confirmLoading = true;
          this.$http.post(
              this.xUri,
              {
                ...this.elForm
              },
              ({ msg }) => {
                this.$message.success(msg);
                this.confirmLoading = false;
                this.handlerClose();
                this.$emit('reload');
                this.reload();
              },
              ({ msg }) => {
                this.$message.error(msg);
                this.confirmLoading = false;
              }
          );
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 18px;
  color: #333;
  .school-name {
    float: left;
    font-weight: bold;
    padding: 0 12px 0 12px;
  }
  .balance em {
    color: #f54030;
  }
}
.el-select,.el-input,.el-textarea {
  width: 280px;
}
.yuan {
  margin-left: 10px;
}
</style>
